import { Component } from 'react'; 
import Dialog1 from '../../components/Dialog1'; 

export default class Child1 extends Component {
	state = {
		msg1: 1,
		msg2: 1,
		msg3: 1,
		msg4: 1,
		msg5: 1,
	}
	fn1 = () => {
		console.log('fn1');
		this.setState({
			msg1: this.state.msg1 + 1,
		})
		Dialog1.show('这是弹层1')
	}
	fn2 = () => {
		console.log('fn2');
		this.setState(({msg2}) => {
			return {
				msg2: msg2 + 1,
			}
		})
		Dialog1.hide('这是弹层1')
	}
	fn3 = () => {
		console.log('fn3');
		this.setState((state, props) => {
			return {
				msg3: state.msg3 + 1,
			}
		})
	}
	fn4 = () => {
		console.log('fn4');
		this.setState({
			msg4: this.state.msg4 + 1,
		}, () => {
			console.log('fn4', 'done');
		})
	}
	//监听 state 变化
	static getDerivedStateFromProps (nextProps){
		console.log('变化执行')
		return null;
	}
	// 渲染函数
    render() {
    	const { msg1, msg2, msg3, msg4, msg5 } = this.state;
    	return (
			<div>
				<div onClick={this.fn1}>Child1:{msg1}:打开弹窗</div>
				<div onClick={this.fn2}>Child1:{msg2}:关闭弹窗</div>
				<div onClick={this.fn3}>Child1:{msg3}</div>
				<div onClick={this.fn4}>Child1:{msg4}</div>
			</div>
		);
    }
};
